<template>
  <div class="page-home">
    <div class="features-container">
      <div class="features-wrapper">
        <template v-for="(mainItem, mainIndex) in features">
          <div class="main-item" :key="mainIndex">
            <div class="main-title">
              {{mainItem.title}}
            </div>
            <a-row :gutter="16">
              <a-col :span="6" v-for="(cardItem, cardIndex) in mainItem.child" :key="cardIndex">
                <div class="block-card">
                  <div class="card-title">
                    <a-icon :type="cardItem.icon" />
                    {{cardItem.title}}
                  </div>
                  <div class="card-content">
                    <div
                      class="small-item"
                      v-for="(smallItem, smallIndex) in cardItem.child"
                      :key="smallIndex"
                      :alt="smallItem.title"
                      :title="smallItem.title"
                      @click="locationModule"
                    >
                      {{smallItem.title}}
                    </div>
                  </div>
                </div>
              </a-col>
            </a-row>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import store from '@/store'

export default {
  name: 'Home',
  components: {
  },
  data () {
    return {
      features: [
        {
          title: '人事OA',
          child: [
            {
              title: '组织管理',
              icon: 'deployment-unit',
              child: [
                { title: '公司架构' },
                { title: '员工档案' },
                { title: '新增员工' },
                { title: '员工权限' },
                { title: '角色管理' },
                { title: '快捷配置' }
              ]
            },
            {
              title: '考勤管理',
              icon: 'laptop',
              child: [
                { title: '考勤报表' },
                { title: '考勤配置' }
              ]
            },
            {
              title: '员工奖罚',
              icon: 'gold',
              child: [
                { title: '奖罚管理' },
                { title: '奖惩类型' },
                { title: '代扣代缴' },
                { title: '代扣代缴类型' }
              ]
            },
            {
              title: '薪资管理',
              icon: 'money-collect',
              child: [
                { title: '薪资报表' },
                { title: '薪资配置' },
                { title: '提成配置' }
              ]
            }
          ]
        },
        {
          title: '业务管理',
          child: [
            {
              title: '楼盘字典',
              icon: 'book',
              child: [
                { title: '楼盘列表' },
                { title: '楼盘资料' }
              ]
            },
            {
              title: '新房管理',
              icon: 'home',
              child: [
                { title: '客户管理' },
                { title: '业绩管理' },
                { title: '统计报表' }
              ]
            },
            {
              title: '管理工具',
              icon: 'apartment',
              child: [
                { title: '数据移交' },
                { title: '楼盘变更' },
                { title: '模板管理' },
                { title: '审核流程' }
              ]
            },
            {
              title: '其他应用',
              icon: 'appstore',
              child: [
                { title: '系统监控' },
                { title: '投诉管理' },
                { title: '委托配置' },
                { title: '抢单统计' },
                { title: '微店后台' }
              ]
            }
          ]
        },
        {
          title: '交易管理',
          child: [
            {
              title: '合同管理',
              icon: 'audit',
              child: [
                { title: '合同列表' },
                { title: '合同模板' },
                { title: '成交记录' },
                { title: '合同配置' },
                { title: '合同号配置' }
              ]
            },
            {
              title: '权证流程',
              icon: 'branches',
              child: [
                { title: '流程步骤' },
                { title: '已办结流程' },
                { title: '流程配置' }
              ]
            },
            {
              title: '诚意金定金',
              icon: 'pay-circle',
              child: [
                { title: '诚意金报', alt: '诚意金报表' },
                { title: '增诚意金', alt: '新增诚意金' },
                { title: '定金报表' },
                { title: '新增定金' }
              ]
            }
          ]
        },
        {
          title: '财务管理',
          child: [
            {
              title: '财务报表',
              icon: 'file-zip',
              child: [
                { title: '应收实收' },
                { title: '收款结算单' },
                { title: '门店月报' }
              ]
            },
            {
              title: '业绩提成',
              icon: 'like',
              child: [
                { title: '业绩信息' },
                { title: '业绩报表' },
                { title: '业绩核算', alt: '业绩核算' },
                { title: '提成报表' },
                { title: '权证业绩核', alt: '权证业绩核算表' },
                { title: '公司业绩' }
              ]
            },
            {
              title: '票据管理',
              icon: 'insurance',
              child: [
                { title: '票据明细' },
                { title: '票据分配' },
                { title: '票据模板' },
                { title: '票据设置' }
              ]
            },
            {
              title: '成本核算',
              icon: 'file-search',
              child: [
                { title: '记账本' },
                { title: '帐套管理' },
                { title: '门店费用' }
              ]
            }
          ]
        }
      ]
    }
  },
  computed: {
    user () {
      return store.state.user
    }
  },
  methods: {
    locationModule () {
      this.$router.push({
        name: 'Test'
      })
    },
    test () {
    },
    printString () {
    }
  },
  mounted () {
  }
}
</script>

<style lang="less" scoped>
.page-home{
  padding: 18px;
  .features-container{
    .features-wrapper{
      .main-item{
        margin-top: 24px;
        &:first-child{
          margin-top: 0px;
        }
        .main-title{
          line-height: 1;
          font-size: 18px;
          padding-left: 8px;
          border-left: 4px solid #3C6EF0;
        }
        .block-card{
          box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.02);
          margin-top: 14px;
          background-color: #fff;
          padding: 16px 20px;
          min-height: 130px;
          box-sizing: border-box;
          transition: all .15s;
          &:hover{
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.06);
          }
          .card-title{
            font-size: 14px;
            font-weight: bold;
            i{
              margin-right: 2px;
              color: #3C6EF0;
            }
          }
          .card-content{
            margin-top: 14px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-start;
            .small-item{
              margin-bottom: 10px;
              position: relative;
              // min-width: 33.333%;
              padding-right: 12px;
              margin-right: 8px;
              color: #777;
              cursor: pointer;
              &:hover{
                color: #3C6EF0;
              }
              &::after{
                position: absolute;
                content: '|';
                right: 0;
                color: #ddd;
              }
              &:last-child, &:nth-child(3n){
                &::after{
                  content: '';
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
